
<template>
  <div class="tree-select-class">
    <div v-if="isAllOption">
      <el-radio-group v-model="isAll" @change="changeRadio">
        <el-radio label="1">全部部门</el-radio>
        <el-radio label="0">指定部门</el-radio>
      </el-radio-group>
    </div>
    <div v-if="isAll === '0'">
      <el-select
        v-model="selectValue"
        ref="selectBlur"
        :class="outClass"
        :size="size"
        clearable
        @clear="clearSelect"
        :popper-class="poperClass"
        :placeholder="placeholder"
        @change="onSelectChange"
      >
        <el-option
          :value="treeProps.valueKey"
          :label="treeProps.label"
          style="height: auto"
        >
          <el-tree
            ref="permissionTree"
            class="tree-class"
            :data="tree"
            :props="treeProps"
            :show-checkbox="isCheckbox"
            :highlight-current="true"
            :check-strictly="true"
            :check-on-click-node="true"
            :node-key="treeProps.valueKey"
            default-expand-all
            :expand-on-click-node="false"
            @check="treeCheck"
            :default-checked-keys="defaultChecked"
          >
          </el-tree>
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PermissionTree',
  props: {
    value: {
      // 双向绑定字符串
      type: String,
      default: ''
    },
    tree: {
      // 树数据
      type: Array,
      default () {
        return []
      }
    },
    poperClass: {
      type: String,
      default: 'treeSelectStyle'
    },
    placeholder: {
      type: String,
      default: ''
    },
    treeProps: {
      type: Object,
      default () {
        return {
          valueKey: 'value',
          label: 'name'
        }
      }
    },
    isCheckbox: {
      type: Boolean,
      default: false
    },
    isAllOption: {
      type: Boolean,
      default: false
    },
    disabledId: {
      // 需要禁用的Id
      type: Array,
      default () {
        return []
      }
    },
    outClass: {
      type: String,
      default: 'w320'
    },
    size: {
      type: String,
      default: 'small'
    }
  },
  data () {
    return {
      isAll: '0',
      selectValue: '',
      checkedList: [],
      checkedLabelList: [],
      pIdList: [],
      childIds: []
    }
  },
  computed: {
    treeValue () {
      if (this.value) {
        return this.value.split(',').filter((i) => i)
      } else {
        return []
      }
    },
    defaultChecked () {
      this.$set(this, 'checkedList', this.treeValue)
      let arr = this.treeValue
      return arr
    }
  },
  watch: {
    isAll (val) {
      if (+val === 1) {
        this.selectValue = '全部部门'
        this.$emit('input', '-1')
        this.$emit('get-label', '全部部门')
      }
    }
  },
  created () {
    if (this.disabledId) {
      this.loop(this.tree)
    }
    if (this.isAllOption && this.value === '-1') {
      this.isAll = '1'
    } else {
      this.getNodes()
    }
  },
  mounted () {
    setTimeout(() => {
      this.getNodes()
    }, 1000)
  },
  methods: {
    loop (list = []) {
      list.length &&
        list.forEach((i) => {
          i.disabled = this.disabledId.includes(i[this.treeProps.valueKey])
          if (i.children && i.children.length) {
            this.loop(i.children)
          }
        })
    },
    getNodes () {
      let nodes
      setTimeout(() => {
        nodes = this.$refs.permissionTree.getCheckedNodes()
        console.log(nodes)
        let label =
          nodes && nodes.map((i) => i[this.treeProps.label]).join(',')
        this.selectValue = label
      }, 200)
    },
    changeRadio (val) {
      this.selectValue = ''
    },
    treeCheck (obj, treeObj) {
      if (!this.isCheckbox) {
        this.checkedLabelList = [obj[this.treeProps.label]]
        this.checkedList = [obj[this.treeProps.valueKey]]
        this.$refs.selectBlur.blur()
      } else {
        const checkedLabels = treeObj.checkedNodes.map(
          (i) => i[this.treeProps.label]
        )
        this.checkedLabelList = [...new Set(checkedLabels)]
        const checkedIds = treeObj.checkedKeys.concat(treeObj.halfCheckedKeys)
        this.checkedList = [...new Set(checkedIds)]
      }
      this.setCheckedList()
    },
    setCheckedList () {
      const outValue =
        this.checkedList && this.checkedList.length > 0
          ? this.checkedList.join(',')
          : ''
      const selectValue =
        this.checkedLabelList && this.checkedLabelList.length > 0
          ? this.checkedLabelList.join(',')
          : ''
      this.selectValue = selectValue
      this.$emit('input', outValue)
      this.$emit('get-label', selectValue)
    },
    clearSelect () {
      // 重置
      this.checkedLabelList = []
      this.checkedList = []
      this.selectValue = ''
      let arrNew = []
      this.selectValue = ''
      this.$refs.permissionTree.setCheckedNodes(arrNew)
      this.$emit('input', '')
      this.$emit('get-label', '')
    },
    onSelectChange (val) {
      if (this.tree && this.tree.length <= 0) {
        this.selectValue = ''
      }
    }

  }
}
</script>

<style lang="scss">
.tree-select-class {
  .tree-class {
    border: none !important;
  }
}
</style>
